import React, { Component } from 'react';
import { StyleSheet, PixelRatio, View, Text, Image, Animated, TouchableOpacity, Alert } from 'react-native';
import { GLOBAL } from '../../../../config/global';
import { OrderCommon } from '../../_common/common';
import { CURRENCY } from '../../../../utils/helper';
import navigationSeevice from '../../../../components/navigation/navigationSeevice';
import { style } from '../../../../theme/style';
import ToastUtil from '../../../../utils/toast';
import serviceAPI from '../_common/serviceAPI';
import Permission from '../../../../utils/permission';
import { CommonDialog } from '../../../../components/common/Dialog';
import RadioButton from '../../../../components/form/radioButton';
import COLORS from '../../../../theme/colors';
import { PriceTypeUI } from '../../../../component/ui/PriceTypeUI';


const scale = GLOBAL.SCALE;
export class ResourceToClaimCpt extends Component {
    constructor(props) {
        super(props);
        let { itemData } = props || {};
        this.state = {
            heightObj: new Animated.Value(55 * scale),
            imgObj: new Animated.Value(0),
            onoff: false,
            modalVisible: false
        }
        this.onOff = true;
        this.selectData = null;
        this.pageData = null;
        this.mergeData = null; // 有合并的资源
        this.selectedKey = null; //选择合并id
        this.tranReportType = null;
        this.isLongFrame = 0;
    }

    componentDidMount = () => { }

    // 动画
    _startAnimated = (num) => {
        let { onoff, heightObj, imgObj } = this.state;
        console.log('onoff-9999', onoff)
        if (onoff) {
            Animated.timing(imgObj, { toValue: 0, duration: 200, }).start()
            Animated.timing(heightObj, { toValue: 55 * scale, duration: 200, }).start(() => { this.setState({ onoff: false }) });
        } else {
            Animated.timing(imgObj, { toValue: 1, duration: 200, }).start()
            Animated.timing(heightObj, { toValue: 55 * num * scale, duration: 200 }).start(() => { this.setState({ onoff: true }) })
        }
    }

    //跳资源详情
    _goDetail = (paramsData) => {
        let { choice } = this.props || {};
        paramsData.choice = choice;
        navigationSeevice.navigate('TurnOrderInfo', paramsData)
    }

    // 认领
    _confirmFn = async (data) => {
        let { choice } = this.props || {};
        if (!data) return;
        let sendData = [];
        data.resourceBidOrderList && data.resourceBidOrderList.forEach((item) => {
            //排除没有订单类型的数据
            if (item.checked) {
                sendData.push(item.bidOrderId);
            }
        })
        console.log('默认-认领-参数', sendData)
        let responeData = await serviceAPI.confirm({ tranReportType: this.tranReportType, bidOrderIdList: sendData, corpId: choice.corpId });
        this.tranReportType = null;
        if (responeData) {
            ToastUtil.showSuccess('资源意向认领成功').then(() => {
                this.pageData.bizStaffId = data.userId;
                this._goDetail(this.pageData);
            });
        }
        this._closeFn();
    }

    //get 获取意向资源已认领列表(查看合并列表)
    _getMergeList = async () => {
        let sendData = [];
        this.selectData.resourceBidOrderList && this.selectData.resourceBidOrderList.forEach((item) => {
            if (item.checked) {
                sendData.push(item.bidOrderId);
            }
        })
        console.log('sendData', sendData)
        let responeData = await serviceAPI.mergeList({ tranReportType: this.tranReportType, bidOrderIdList: sendData, companyId: this.selectData.companyId, orderType: this.selectData.orderType, isCustIntentionPlan: this.selectData.isCustIntentionPlan });
        console.log('responeData-查看关联数据', responeData);
        return responeData;
    }


    // 认领按钮
    _isConfig = async (data, pageData) => {
        this.selectData = data || {};
        this.pageData = pageData || {};
        console.log('this.selectData ', this.selectData)
        console.log('this.pageData ', this.pageData)
        //是否有合并资源
        this.mergeData = await this._getMergeList();
        if (JSON.stringify(this.mergeData) == "{}") {
            this.mergeData = null;
        }
        this.setState({
            modalVisible: true
        }, () => { this.btnOne = false; })
    }

    // 无合并 确认
    _onConfirmPressFn = () => {
        if (this.mergeData) {//走合并
            console.log('9999999', '走合并');
            this._postMerge();
        } else { //
            this._confirmFn(this.selectData);
        }
    }

    //合并接口
    _postMerge = async () => {
        if (this.selectedKey == null) {
            Alert.alert('提示', '请先选择要合并的单据', [
                { text: '确认' }
            ])
            return
        }
        let parems = this._parameCollect();
        console.log('parems-000', parems)
        this.pageData.bidId = parems.resourceBidOrderClaimedList[0].bidOrderGroupId; // 特殊处理
        this.pageData.bidOrderGroupId = parems.resourceBidOrderClaimedList[0].bidOrderGroupId; // 特殊处理 拿合并后的bidOrderGroupId
        console.log('this.pageData', this.pageData)
        let responeData = await serviceAPI.merge(parems);
        console.log('responeData-合并接口', responeData);
        if (responeData && !responeData.isReject) { // 合并成功
            ToastUtil.showSuccess('资源意向合并领成功').then(() => {
                this.pageData.bizStaffId = this.selectData.userId;
                console.log('页面参数', this.pageData)
                this._goDetail(this.pageData);
            });
        } else if (responeData.msg) {
            //Alert.alert('提示', responeData.msg, [{ text: '确认' }]);
            ToastUtil.showError(responeData.msg);
        }
        this._closeFn();
    }



    //合并接口参数搜集
    _parameCollect = () => {
        let resourceBidOrderClaimedList = this.mergeData[this.selectedKey].resourceBidOrderList;
        let resourceBidOrderClaimList = this.selectData.resourceBidOrderList;
        //排除没有订单类型的数据 - 有问题
        resourceBidOrderClaimList = resourceBidOrderClaimList.filter(item => item.checked);
        return { tranReportType: this.tranReportType, resourceBidOrderClaimedList, resourceBidOrderClaimList };
    }


    // 清空 上一次选中的数据
    _clearSelect = () => {
        this.selectedKey = null; // 关闭重现选
        this.mergeData = null;  // 清空上一次选择的数据
    }

    // 关闭弹框
    _closeFn = (str) => {
        if (str) { // 不合并 按钮
            this._confirmFn(this.selectData);
        } else {
            this._clearSelect();
            this.setState({
                modalVisible: false
            })
        }
    }

    //选中
    _selectedChange = (key) => {
        if (key == this.selectedKey) return;
        this.selectedKey = key;
        this.setState({ ls: true })
    }


    //匹配资源展示
    _renderToastWrap = () => {
        return this.mergeData ? (
            <View>
                <Text style={styles.infoFont12}>您已认领相同资源包转单数据，是否合并叠加商品数量？</Text>
                <Text style={[styles.infoFont12, styles.infoMt]}>请选择合并到哪个单据</Text>
                <View style={{ maxHeight: 250 * scale }}>
                    {
                        this.mergeData && this.mergeData.map((item, index) => {
                            let { bidOrderId, claimTime, resourceBidOrderList, deliveryTypeName, transportTypeName, destAddress, deliveryAddress, deliveryBeginDate, deliveryEndDate, comments } = item || {};
                            return <View style={styles.infoItem} key={index}>
                                <RadioButton radioValue={`认领时间 ${claimTime}`}
                                    radioKey={index}
                                    selectedKey={this.selectedKey}
                                    selectedChange={this._selectedChange}
                                />
                                {
                                    resourceBidOrderList && resourceBidOrderList.map((items, indexs) => {
                                        let { comments } = items || {};
                                        return <View key={indexs} style={[styles.infoRow, styles.infoBetween, styles.infoMl]}>
                                            <Text style={[styles.infoFont12, styles.infoBold]}>{items.goodsName}</Text>
                                            <Text style={styles.infoFont12}>已认领 {items.quantity || ''}吨</Text>
                                        </View>
                                    })
                                }
                                <Text style={[styles.infoFont10, styles.infoMl]}>{deliveryTypeName ? `${deliveryTypeName} | ` : null}{transportTypeName ? `${transportTypeName} | ` : null}{destAddress ? `${destAddress} | ` : null} {deliveryAddress ? `${deliveryAddress} | ` : null} {comments ? `${comments} | ` : null} {deliveryBeginDate}-{deliveryEndDate}  </Text>
                            </View>
                        })
                    }
                </View>
            </View>
        ) : <Text style={{ textAlign: 'center', width: '100%' }}>是否确认认领？</Text>
    }

    //选中商品列表
    _selectGoods = () => {
        let { itemData } = this.props || {};
        let reseat = [];
        itemData.resourceBidOrderList.forEach(item => {
            if (item.checked) {
                reseat.push({ goodsId: item.goodsId, goodsName: item.goodsName, priceFormlaId: item.priceFormlaId })
            }
        })
        return reseat;
    }

    //校验是否有泉化框架
    _isLongFrame = async () => {
        let { itemData } = this.props || {};
        let { bidId } = itemData || {};
        let reqGoodsInfos = this._selectGoods();
        let responeData = await serviceAPI.isLong({ bidId, reqGoodsInfos });
        this.isLongFrame = responeData || 0;
        console.log('responeData', responeData, this.isLongFrame)
    }

    _setOpen = async () => {
        await this._isLongFrame();
        this.setState({
            setModalVisible: true
        }, () => { this.btnOne = false; })
    }

    _setOk = async () => {
        let { itemData } = this.props || {};
        let { resourceBidOrderList, orderType, bidOrderGroupId, bidId } = itemData || {};
        if (!this.tranReportType) {
            this.isBtn = true;
            this.setState({ ls: true }, () => {
                setTimeout(() => {
                    this.isBtn = false;
                    this.setState({ ls: true })
                }, 2000)
            });
            return;
        };

        this.setState({
            setModalVisible: false
        }, () => {
            this._isConfig(itemData, { bidId, tranReportType: this.tranReportType, orderType, bidOrderGroupId })
        })
    }

    _setClose = () => {
        this.tranReportType = null;
        this.setState({
            setModalVisible: false
        })
        console.log('关闭')
    }

    //设置类型
    _selectType = (key) => {
        this.tranReportType = key;
        this.setState({ ls: true })
    }

    _setRender = () => {
        let { itemData } = this.props || {};
        let { orderType } = itemData || {};
        return <View>
            <View style={styles.typeHead}>
                <Text style={styles.require}>*</Text>
                <Text style={styles.typeText}>请指定认领后{orderType === 'S' ? '销售' : '采购'}订单执行类型</Text>
            </View>
            <View style={styles.typeBox}>
                <TouchableOpacity onPress={() => { this._selectType('N') }} style={styles.typeBoxItem}>
                    <View style={[styles.circle]}>
                        {this.tranReportType === 'N' ? <View style={styles.selectedCircle}></View> : null}
                    </View>
                    <Text style={[styles.typeTextOption, this.tranReportType === 'N' ? styles.typeTextWeight : null]}>敞口现货(含:普通长约)</Text>
                </TouchableOpacity>
                {
                    orderType === 'S' ? (
                        <View>
                            <TouchableOpacity onPress={() => { if (!this.isLongFrame) { return; } this._selectType('Q'); }} style={[styles.typeBoxItem, !this.isLongFrame ? { opacity: .5 } : null]}>
                                <View style={[styles.circle]}>
                                    {this.tranReportType === 'Q' ? <View style={styles.selectedCircle}></View> : null}
                                </View>
                                <Text style={[styles.typeTextOption, this.tranReportType === 'Q' ? styles.typeTextWeight : null]}>泉化销售</Text>
                            </TouchableOpacity>
                            {!this.isLongFrame ? <Text style={styles.typeTextTip}>(您名下没有可匹配的泉化框架)</Text> : null}
                        </View>
                    ) : null
                }
            </View>
            <View style={styles.noGoodsBox}>
                {!this.tranReportType && this.isBtn ? <View style={styles.containerStyle}><Text style={styles.noGoods}>请先选择商品类型</Text></View> : null}
            </View>

        </View>
    }

    _checked = (itemData, goodsIndex) => {
        let { callback } = this.props || {};
        console.log('goodsIndex', goodsIndex, itemData);
        itemData.resourceBidOrderList[goodsIndex].checked = !itemData.resourceBidOrderList[goodsIndex].checked;
        callback && callback(itemData);
    }

    //校验是否有商品
    _isGoods = (itemData) => {
        let { resourceBidOrderList } = itemData || {};
        let resealt = false;
        resourceBidOrderList.forEach((item) => {
            if (item.checked) {
                resealt = true;
            }
        })
        if (!resealt) {
            ToastUtil.showWarning('请先选择商品');
        }
        return resealt;
    }

    //认领按钮
    _claimBtn = (itemData) => {
        if (this.btnOne) return;
        this.btnOne = true;
        let { bidId, tranReportType, orderType, bidOrderGroupId, resourceBidOrderList } = itemData || {};
        //走设置类型
        if (!resourceBidOrderList[0].tranReportType) {
            if (!this._isGoods(itemData)) { this.btnOne = false; return; }
            this._setOpen();
        } else { //直接走认领
            // 问题 tranReportType  原来是用的主项 现在用子项
            this._isConfig(itemData, { bidId, tranReportType, orderType, bidOrderGroupId })

        }
    }


    render() {
        let titleImgObj = require('../../../../imgs/order/down.png');
        const correct = require('../../../../imgs/global/correct.png');
        let { heightObj, imgObj, modalVisible, setModalVisible } = this.state;
        const spin = imgObj.interpolate({
            inputRange: [0, 1],//输入值
            outputRange: ['0deg', '180deg'] //输出值
        })
        let { itemData, choice } = this.props || {};
        let { bidPackageId, bidId, companyName, createTime, resourceBidOrderList, tranReportType, bizStaffName, areaName, lastClaimTime, bizStaffId, userId, orderType, bidOrderGroupId } = itemData || {};
        let unit = CURRENCY.getUnit(itemData.currency).text;

        return (
            <View style={[{ paddingBottom: 5 * scale, paddingLeft: 12 * scale, paddingRight: 12 * scale }]}>
                <View style={styles.itemHead}>
                    <View style={{ flexDirection: 'row', flex: 1 }}>
                        <Text numberOfLines={1} style={{ color: '#272727' }}>{companyName}</Text>
                    </View>
                    <Text style={{ color: '#272727', fontSize: 13 * scale, opacity: .6 }}>{createTime}</Text>
                </View>
                <View activeOpacity={.6} style={styles.listItem} onPress={() => { (bizStaffId == userId || !Permission.check('CLM002')) && this._goDetail({ bidId, tranReportType, bizStaffId, orderType, bidOrderGroupId }) }}>
                    <View style={styles.itemHeader}>
                        <View style={styles.itemHead}>
                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                <Text style={{ color: '#272727', fontSize: 13 * scale }}>资源包 {bidPackageId && bidPackageId.length > 18 ? bidPackageId.substr(0, 18) + '....' : bidPackageId}</Text>
                            </View>
                            <Text style={[{ color: '#FA4516', fontSize: 13 * scale }]}>{areaName}</Text>
                        </View>
                        <Text style={{ fontSize: 10 * scale, paddingTop: 5 * scale, color: '#848A96' }}>(业务组织：{choice.corpName || '-'})</Text>
                    </View>
                    <Animated.View style={[styles.itemBody, resourceBidOrderList && resourceBidOrderList.length > 1 ? { height: heightObj } : null]}>
                        {
                            resourceBidOrderList && resourceBidOrderList.length && resourceBidOrderList.map((item, index) => {
                                return (
                                    <View style={styles.goodsItem} key={index}>
                                        <TouchableOpacity onPress={() => { this._checked(itemData, index) }} style={{ flexDirection: 'row', alignItems: 'center', maxWidth: 160 * scale }}>
                                            {
                                                (item.tranReportType != 'Q' && item.tranReportType != 'N') ? <View style={styles.lockView} >
                                                    {item.checked ? <Image style={styles.lockImage} source={correct} /> : null}
                                                </View> : null
                                            }
                                            {item.tranReportType == 'Q' ? <Image source={OrderCommon.iconData.quanHuaImg} style={styles.infoItemImg} /> : null}
                                            {item.tranReportType == 'N' ? <Image source={OrderCommon.iconData.openImg} style={styles.infoItemImg} /> : null}
                                            <Text style={styles.goodsItemTitle}>{item.goodsName}</Text>
                                            <PriceTypeUI data={{ priceType: item.priceType }} />
                                        </TouchableOpacity>
                                        <View>
                                            {bizStaffId == userId ? <Text style={styles.goodsItemText}>¥{item.price >= 0 ? item.price : '-'} {unit}/{item.uomName || '吨'}</Text> : <Text style={styles.goodsItemText}>*****<Text style={[styles.goodsItemText, styles.goodsItemText2]}>{unit || '元'}/{item.uomName || '吨'}</Text></Text>}
                                            {bizStaffId == userId ? <Text style={styles.goodsItemText2}>{item.quantity} {item.uomName || '吨'}</Text> : <Text style={styles.goodsItemText}>*****<Text style={styles.goodsEmpty}>元/</Text><Text style={[styles.goodsItemText, styles.goodsItemText2]}>{item.uomName || '吨'}</Text></Text>}
                                        </View>
                                    </View>
                                )
                            })
                        }
                    </Animated.View>
                    {
                        resourceBidOrderList && resourceBidOrderList.length > 1 ? <TouchableOpacity onPress={() => { this._startAnimated(resourceBidOrderList.length) }} activeOpacity={1} style={styles.imgBox}>
                            <Animated.Image style={[styles.downImg, { transform: [{ rotateX: spin }] }]} source={titleImgObj} ></Animated.Image>
                        </TouchableOpacity> : null
                    }
                    <View style={styles.itemFooter}>
                        {
                            /* 业务员ID bizStaffId String   
                                业务员名称 bizStaffName String   
                                机构号 organId String   
                                机构名称 organName String */}
                        {/* 领导  */}
                        {
                            !Permission.check('CLM002') ? (bizStaffId ? <Text style={styles.claimInfo}>{bizStaffName}（{areaName}）| {lastClaimTime}认领</Text> : <Text style={styles.claimInfo}>暂未认领</Text>) : null
                        }
                        {/* 业务员 */}
                        {
                            Permission.check('CLM002') ? (bizStaffId ? <Text style={styles.claimInfo}>{bizStaffName}（{areaName}）| {lastClaimTime}认领</Text> : <TouchableOpacity style={styles.claimBtn} onPress={() => { this._claimBtn(itemData) }}>
                                <Text style={styles.claimBtnText}>认领</Text>
                            </TouchableOpacity>) : null
                        }
                    </View>
                </View>
                {
                    modalVisible ? <CommonDialog cancelText={this.mergeData ? "不合并" : "取消"} confirmBtnText={this.mergeData ? "合并叠加" : "确认"} onConfirmPress={this._onConfirmPressFn} onCancelmPress={() => { this._closeFn(this.mergeData ? '合并' : null) }} isAlignment={true} modalVisible={modalVisible} title={'提示'} renderCustom={this._renderToastWrap} onClosePress={this._closeFn} /> : null
                }
                {
                    setModalVisible ? <CommonDialog cancelText={"取消"} confirmBtnText={"确认"} onConfirmPress={this._setOk} onCancelmPress={this._setClose} isAlignment={true} modalVisible={setModalVisible} title={'提示'} renderCustom={this._setRender} onClosePress={this._setClose} /> : null
                }
            </View>
        )
    }
}

const styles = StyleSheet.create({
    listItem: {
        backgroundColor: '#fff',
        borderRadius: 4 * scale,
        marginBottom: 15 * scale,
        marginTop: 7 * scale,
        padding: 12 * scale
    },
    itemHeader: {
        flexDirection: 'column',
        justifyContent: 'space-between',
        paddingBottom: 10 * scale,
        borderBottomColor: '#e4e4e4',
        borderBottomWidth: 1 / PixelRatio.get(),
        borderStyle: 'solid',
    },
    itemCommonText: {
        fontSize: 13 * scale,
        color: '#272727',
        paddingBottom: 6 * scale,
        paddingTop: 4 * scale
    },
    itemHead: {
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    itemFooter: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
        marginTop: 10 * scale,
        paddingTop: 10 * scale,
        borderTopColor: '#e4e4e4',
        borderTopWidth: 1 / PixelRatio.get(),
        borderStyle: 'solid',
    },
    itemBody: {
        position: 'relative',
        overflow: 'hidden',
        backgroundColor: '#fff',
        height: 50 * scale
    },
    goodsItem: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginTop: 7 * scale,
        marginBottom: 8 * scale,
        height: 40 * scale
    },
    goodsItemTitle: {
        fontSize: 14 * scale,
        fontWeight: 'bold'
    },
    goodsItemText: {
        fontSize: 13 * scale,
        color: '#333',
        textAlign: 'right',
        lineHeight: 20 * scale
    },
    goodsItemText2: {
        textAlign: 'left'
    },
    goodsTotal: {
        textAlign: 'center',
        opacity: .8
    },
    infoItemImg: {
        marginRight: 5 * scale
    },
    imgBox: {
        flexDirection: 'row',
        justifyContent: 'center',
        paddingTop: 5 * scale,
    },
    downImg: {
        height: 16 * scale,
        width: 12 * scale
    },
    claimBtn: {
        backgroundColor: style.color.themeColor,
        padding: 8 * scale,
        paddingLeft: 20 * scale,
        paddingRight: 20 * scale,
        borderRadius: 20 * scale
    },
    claimBtnText: {
        color: style.color.white,
        fontSize: 13 * scale,
    },
    claimInfo: {
        fontSize: 12 * scale,
        opacity: .7
    },
    goodsEmpty: {
        opacity: 0
    },


    infoMt: {
        marginTop: 30 * scale
    },
    infoMl: {
        paddingLeft: 20 * scale,
        marginTop: 8 * scale
    },
    infoRow: {
        flexDirection: 'row',
    },
    infoBetween: {
        justifyContent: 'space-between'
    },
    infoFont12: {
        fontSize: 12 * scale
    },
    infoBold: {
        fontWeight: 'bold'
    },
    infoFont10: {
        fontSize: 10 * scale,
        opacity: .7
    },
    infoItem: {
        marginTop: 15 * scale
    },
    btnPre: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        width: 66 * scale,
        height: 28 * scale,
        borderColor: style.color.themeColor,
        borderWidth: 1 / PixelRatio.get(),
        borderRadius: 14 * scale,
    },
    btnPreActive: {
        backgroundColor: style.color.themeColor,
        marginLeft: 10 * scale
    },
    btnText: {
        fontSize: 12 * scale,
        color: style.color.themeColor
    },
    btnTextActive: {
        color: style.color.white
    },
    circle: {
        width: 14 * scale,
        height: 14 * scale,
        borderStyle: 'solid',
        borderColor: '#0E7FFD',
        borderWidth: 1 * scale,
        borderRadius: 7 * scale,
        alignItems: 'center',
        justifyContent: 'center',
        marginRight: 6 * scale,
    },
    selectedCircle: {
        width: 6 * scale,
        height: 6 * scale,
        borderStyle: 'solid',
        borderColor: '#0E7FFD',
        borderWidth: 1 * scale,
        borderRadius: 3 * scale,
        backgroundColor: '#0E7FFD',
    },
    typeText: {
        fontSize: 12 * scale,
        color: '#000'
    },
    typeTextWeight: {
        fontWeight: 'bold',
        color: '#000'
    },
    typeTextOption: {
        fontSize: 12 * scale,
        color: '#333'
    },
    typeTextTip: {
        color: style.color.orange,
        fontSize: 10 * scale
    },
    typeBox: {
        paddingVertical: 10 * scale,
        marginHorizontal: 15 * scale
    },
    typeHead: {
        flexDirection: 'row',
    },
    typeBoxItem: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: 15 * scale
    },
    require: {
        color: style.color.fontRed1,
        fontSize: 16 * scale,
        marginRight: 5 * scale
    },
    hdBox: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingRight: 5 * scale,
    },
    lockView: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        height: 12 * scale,
        width: 12 * scale,
        borderWidth: 1 * scale,
        borderColor: style.color.themeColor,
        marginRight: 5 * scale
    },
    lockImage: {
        tintColor: style.color.themeColor,
        width: 8 * scale,
        height: 8 * scale
    },
    noGoods: {
        fontSize: 13 * scale,
        color: 'red',
        fontSize: 16,
        color: '#fff',
        textAlign: 'center'
    },
    noGoodsBox: {
        position: 'absolute',
        left: '25%',
        top: '50%'
    },

    containerStyle: {
        padding: 10,
        opacity: 0.8,
        borderRadius: 5,

        backgroundColor: COLORS.warningColor,
        shadowColor: COLORS.warningColor,
        shadowOffset: {
            width: 4,
            height: 4
        },
        shadowOpacity: 0.8,
        shadowRadius: 6,
        elevation: 10
    },


})